<script lang="ts" setup>
import { getImage ,getImgPath } from '@/util/bussinessTool'
import { store } from '@/stores/allStores'
import { useRouter } from 'vue-router'
import { paramEncode } from '@/util/bussinessTool'
import { computed } from 'vue';
type dataType = {
    avatar: string | null,
    name: string,
    svcMinute: number,
    price: number
}
const props = defineProps({
    data: {
        type: Object,
        default:()=>({
                avatar: '',
                name: '',
                svcMinute: 0,
                price: 0
            })
    }
})
const router = useRouter()
function onClick() {
    let query = paramEncode({ id: props.data.id })
    router.push({ name: 'workerDetail' ,query: query })
}
const imgUrl = computed(() => {
    if(props.data.avatar){
       return getImage(props.data.avatar)
    }
    else{
        return getImgPath('../assets/static/common/no_pic.png')
    }
})
</script>
<template >
    <div class="flex i-p-10  bg-white  items-center">
        <img class="avatar" :src="imgUrl" />
        <div class="box i-ml-10">
            <div>
                <div class="i-text-14 font-bold">ceshi</div>
                <div class="i-text-15">ceshi</div>
                <div class="i-text-16 font-bold">ceshi</div>
            </div>
            <van-button round :color="store.common.themeColorValue" size="small" @click="onClick">选择技师</van-button>
        </div>
    </div>
</template>
<style>
.box {
    @apply flex justify-between items-center;
    width: calc(100% - 70px);
}

.avatar {
    width: 97px;
    height: 97px;
}
</style>